home *** CD-ROM | disk | FTP | other *** search
/ Maximum CD 1999 June / maximum-cd-1999-06.iso / Fireworks 2 / data1.cab / Program_Files / Settings / HTML_Code / Dreamweaver2 / Imagemap.htt next >
Encoding:
Text File  |  1999-03-01  |  10.1 KB  |  321 lines
  1. // Fireworks Dreamweaver 2 HTML & JavaScript for single images & imagemaps.
  2. // Version 2.0 24JAN99
  3.  
  4.  
  5. // To export HTML without comments change the value of variable doComments to "false".
  6. var doComments=true;
  7.  
  8. // When doComments is set to "true" the WRITE_HTML_COMMENT and WRITE_JS_COMMENT functions
  9. // include HTML and JavaScript in the exported file.
  10. function WRITE_HTML_COMMENT(str) {
  11.     if (doComments) WRITE_HTML("<!--"+str+"-->\n");
  12. }
  13.  
  14. function WRITE_JS_COMMENT(str) {
  15.     if (doComments) WRITE_HTML("/* "+str+" */\n");
  16. }
  17.  
  18. // Write general comments for copying and pasting Fireworks-generated code into existing HTML documents.
  19. WRITE_HTML_COMMENT("To put this html into an existing HTML document, you must copy the JavaScript and");
  20. WRITE_HTML_COMMENT("paste it in a specific location within the destination HTML document. You must then copy");
  21. WRITE_HTML_COMMENT("and paste code for the image with map in a different location.");
  22. WRITE_HTML("\n");
  23.  
  24.  
  25. WRITE_HTML("<html>\n");
  26. WRITE_HTML("\n");
  27.  
  28. WRITE_HTML("<head>\n");
  29. WRITE_HTML("\n");
  30.  
  31. // Use Base Name from export dialog as document title.
  32. WRITE_HTML("<title>", exportDoc.filename, "</title>\n");
  33. WRITE_HTML("\n");
  34.  
  35. // Write Meta tags.
  36. WRITE_HTML("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=");
  37. var charSet = App.getPref("HtmlCharSet");
  38. if (charSet == "") charSet = "iso-8859-1";
  39. WRITE_HTML(charSet + "\">\n"); 
  40. WRITE_HTML("<meta name=\"description\" content=\"Fireworks Image Map\">\n");
  41. WRITE_HTML("\n");
  42.  
  43. // Write HTML target and date created.
  44. var d = new Date();
  45. WRITE_HTML("<!-- Fireworks 2.0  Dreamweaver 2 target.  \n    Created ", d, " -->\n");
  46. WRITE_HTML("\n")
  47.  
  48. // Declare variables for processing Behaviors.
  49. var hasImagemap = false;
  50. var hasStatusMessages = false;
  51.  
  52. var kActionStatusMessage = 1;
  53. var kActionSwapImage = 2;
  54. var kActionRadioGroup = 3;
  55.  
  56. var kEventMouseOver = 0;
  57. var kEventOnClick = 1;
  58. var kEventMouseOut = 2;
  59.  
  60. // Write a client-side imagemap
  61. if (exportDoc.clientMap) {
  62.     var i = 0;
  63.     while (i < imagemap.numberOfURLs) {
  64.         hasImagemap = true; // at least 1 url in the imagemap.
  65.         for (var j=0; j<imagemap[i].behaviors.numberOfBehaviors; j++) {
  66.             var curBehavior = imagemap[i].behaviors[j];
  67.             if (curBehavior.action == kActionStatusMessage) {
  68.                 hasStatusMessages = true;
  69.             }
  70.         }
  71.         i++;
  72.     }
  73.     if (exportDoc.hasBackgroundLink) {
  74.         hasImagemap = true;
  75.     }
  76. }
  77.  
  78. /* Note: In simple imagemaps using the template Imagemap.htt, the only available 
  79.    behavior is the status bar message. Otherwise, the Slices.htt template is used. */
  80. function ProcessBehavior(theCurBehaviors) {
  81.     var gotJavascript = false;
  82.     var overStat = false;
  83.     var hitStat = false;
  84.     var outStat = false;
  85.     var eraseStatOnRestore = false;
  86.     for (var i=0; i<theCurBehaviors.numberOfBehaviors; i++) {
  87.         var curBehavior = theCurBehaviors[i];
  88.         var curJavascript = "";
  89.         var gotStat = false;
  90.         if (curBehavior.action == kActionStatusMessage) {
  91.             gotJavascript = true;
  92.             gotStat = true;
  93.             var statMsg = curBehavior.statusText;
  94.             var restore = curBehavior.restoreOnMouseout;
  95.             curJavascript += "MM_displayStatusMsg('" + statMsg + "');";
  96.             if (restore) {
  97.                 eraseStatOnRestore =  true;
  98.             }
  99.         } else {
  100.             continue;
  101.         }
  102.         if (curBehavior.event == kEventMouseOver) {
  103.             javaOver += curJavascript;
  104.             if (gotStat) overStat = true;
  105.         }
  106.         if (curBehavior.event == kEventMouseOut) {
  107.             javaOut += curJavascript;
  108.             if (gotStat) outStat = true;
  109.         }
  110.         if (curBehavior.event == kEventOnClick) {
  111.             javaClick += curJavascript;
  112.             if (gotStat) hitStat = true;
  113.         }
  114.     }
  115.     if (eraseStatOnRestore) {
  116.         javaOut += "MM_displayStatusMsg(' ');" ;
  117.         outStat = true;
  118.     }
  119.     var ret = "return document.MM_returnValue";
  120.     if (overStat) javaOver += ret;
  121.     if (outStat) javaOut += ret;
  122.     if (hitStat) javaClick += ret;
  123.     return(gotJavascript);
  124. }
  125.  
  126.  
  127. // Write comment for start of JavaScript copy/paste section.
  128. if (hasStatusMessages) {
  129.     WRITE_HTML_COMMENT("-- Copy the JavaScript code including the opening and closing script tags, and paste"); 
  130.     WRITE_HTML_COMMENT("it into the head section of the destination document. If the destination document already"); 
  131.     WRITE_HTML_COMMENT("contains a script section, do not include the script tags when copying. --");
  132.     WRITE_HTML("\n");
  133.     WRITE_HTML_COMMENT("-------------------- BEGIN COPYING THE JAVASCRIPT SECTION HERE --------------------");
  134.     WRITE_HTML("\n");
  135.     
  136.     // Begin Script. Hide Script from non-javascript-enabled browsers.
  137.     WRITE_HTML("<script language=\"JavaScript\">\n");
  138.     WRITE_HTML("<!-- hide this script from non-javascript-enabled browsers\n");
  139.     WRITE_HTML("\n");
  140.                                                                                    
  141. // Function MM_displayStatusMsg executes status bar messages.
  142. function MM_displayStatusMsg(msgStr)  {
  143.     status=msgStr;
  144.     document.MM_returnValue = true;
  145. }
  146.  
  147.     WRITE_HTML(MM_displayStatusMsg)
  148.     WRITE_HTML("\n");
  149.     
  150.     // Stop hiding script from non-javascript-enabled browsers. End script.
  151.     WRITE_HTML("// stop hiding -->\n");
  152.     WRITE_HTML("</script>\n");
  153.     WRITE_HTML("\n");
  154.     
  155.     // End JavaScript copy/paste section.
  156.     WRITE_HTML_COMMENT("-------------------------- STOP COPYING THE JAVASCRIPT HERE --------------------------");
  157.     WRITE_HTML("\n");
  158. }
  159.  
  160. // Close head tag.
  161. WRITE_HTML("</head>\n");
  162. WRITE_HTML("\n");
  163.  
  164. // Begin body tag. Set background color to Fireworks document canvas color.
  165. WRITE_HTML("<body bgcolor=\"#", exportDoc.backgroundColor, "\">\n");
  166. WRITE_HTML("\n");
  167.  
  168. // Write comment for start of image map copy/paste section.
  169. WRITE_HTML_COMMENT("-- Copy the image and map code, and paste the data where ")
  170. WRITE_HTML_COMMENT("you want the image to appear in the destination document. --")
  171. WRITE_HTML("\n");
  172. WRITE_HTML_COMMENT("-------------------------- BEGIN COPYING HERE --------------------------")
  173. WRITE_HTML("\n");
  174.  
  175. // If a server-side image map is being export, write comment on replacing file path.
  176. if (exportDoc.serverMap) {
  177.     WRITE_HTML("<!--   ----------------------------------- NOTE ----------------------------------   --->\n");
  178.     WRITE_HTML("<!--   Replace the text in the following HREF tag with the path to your map file's    -->\n");
  179.     WRITE_HTML("<!--   location on the server. The \"", exportDoc.pathBase, ".map\" file generated by Fireworks needs to be  -->\n");
  180.     WRITE_HTML("<!--   placed in a directory with a CGI Application capable of interpreting the Image -->\n");
  181.     WRITE_HTML("<!--   Map information. If you are unsure about this, contact your web site           -->\n");
  182.     WRITE_HTML("<!--   administrator.                                                                 -->\n");
  183.     WRITE_HTML("\n");
  184.     
  185.     // Generate link to image map file.
  186.     WRITE_HTML("<a href=\"path_to_map_file/", exportDoc.pathBase, ".map\">\n");
  187. }
  188.  
  189. // Write image tag.
  190. WRITE_HTML("<img src=\"", exportDoc.filename,"\" "); 
  191.  
  192. // Determine width and height of image.
  193. WRITE_HTML("width=\"", exportDoc.width, "\" height=\"", exportDoc.height, "\"");
  194.  
  195. // If document has hotspots name the image map.
  196. if (hasImagemap) {
  197.     WRITE_HTML(" usemap=\"#", exportDoc.imagename, "\"")
  198. }
  199.  
  200. // Declare and write alt text.
  201. var altText = exportDoc.altText;
  202.  
  203. if (altText!="") {
  204.     WRITE_HTML(" alt=\"", altText, "\"");
  205. }
  206.  
  207. // If a server-side image map has been requested write ismap tag.
  208. if (exportDoc.serverMap) {
  209.     WRITE_HTML(" ismap");
  210. }
  211.  
  212. WRITE_HTML(" border=\"0\" >\n");
  213.  
  214. if (exportDoc.serverMap) {
  215.     WRITE_HTML("</a>\n");
  216. }
  217. WRITE_HTML("\n");
  218.  
  219. // Write client-side image map.
  220. if (hasImagemap) {
  221.     WRITE_HTML("<map name=\"", exportDoc.imagename, "\">\n");
  222.  
  223.     var i = 0;
  224.     while (i < imagemap.numberOfURLs) {
  225.         var curImagemap = imagemap[i];
  226.         var behaviors = curImagemap.behaviors;
  227.         var javaOver = "";
  228.         var javaOut = "";
  229.         var javaClick = "";
  230.         var gotJavascript = ProcessBehavior(behaviors);
  231.  
  232.         // Write the area tag with shape definitions.
  233.         WRITE_HTML("<area shape=\"");
  234.         WRITE_HTML(curImagemap.shape); // Shapes are rect poly and circle
  235.         WRITE_HTML("\" coords=\"");
  236.         for (var j=0; j<curImagemap.numCoords; j++) {
  237.             if (j>0) WRITE_HTML(",");
  238.             // polygon has n coords.
  239.             // rect has 2 coords, topLeft, and botomRight.
  240.             // Circle has one coord, center; plus radius.
  241.             WRITE_HTML(curImagemap.xCoord(j), ",", curImagemap.yCoord(j)); 
  242.         }
  243.         if (curImagemap.shape == "circle") {
  244.             // Write the radius for circle hotspots.
  245.             WRITE_HTML(", ", curImagemap.radius);
  246.         }
  247.         WRITE_HTML("\"");
  248.         var href = " href=\"#\"";
  249.         if (curImagemap.hasHref) {
  250.             href = " href=\"";
  251.             href += curImagemap.href;
  252.             href += "\"";
  253.             if (curImagemap.hasTargetText) {
  254.                 href += " target=\"";
  255.                 href += curImagemap.targetText;
  256.                 href += "\"";
  257.             }
  258.         }
  259.  
  260.         // Write status bar message commands.
  261.         if (javaOut != "") {
  262.             WRITE_HTML(" onMouseOut=\"", javaOut, "\" ");
  263.         }
  264.         if (javaOver != "") {
  265.             WRITE_HTML(" onMouseOver=\"", javaOver, "\" ");
  266.         }
  267.         if (javaClick != "") {
  268.             WRITE_HTML(" onClick=\"", javaClick, "\" ");
  269.         }
  270.         WRITE_HTML(href);
  271.  
  272.         // Write alt text for hotspot.
  273.         var altText = "";
  274.         if (curImagemap.hasAltText) {
  275.             altText = curImagemap.altText;
  276.         } else {
  277.             altText = exportDoc.altText;
  278.         }
  279.  
  280.         if (altText!="") {
  281.             WRITE_HTML(" title=\"", altText, "\"");
  282.             WRITE_HTML(" alt=\"", altText, "\"");
  283.         }
  284.  
  285.         WRITE_HTML(" >\n");
  286.         i++;
  287.     } 
  288.     
  289.     // Write the image's default URL here.
  290.     if (exportDoc.hasBackgroundLink && exportDoc.backgroundLink.href != "") {
  291.         var curImagemap = exportDoc.backgroundLink;
  292.         WRITE_HTML("<area shape=\"rectangle\" coords=\"0,0, ", exportDoc.width, ",", exportDoc.height, "\" ");
  293.         WRITE_HTML("href=\"", curImagemap.href, "\"");
  294.         if (curImagemap.hasTargetText) {
  295.             WRITE_HTML("\n  target=\"", curImagemap.targetText, "\"");
  296.         }
  297.         var altText = exportDoc.altText;
  298.         if (altText!="") {
  299.             WRITE_HTML(" title=\"", altText, "\"");
  300.             WRITE_HTML(" alt=\"", altText, "\"");
  301.         }
  302.         WRITE_HTML(">\n");
  303.     }    
  304.     WRITE_HTML("</map>\n")
  305.     WRITE_HTML("\n");
  306.     
  307.     WRITE_HTML_COMMENT("   Image Map created with Macromedia Fireworks 2.0   ")
  308. }
  309.  
  310. WRITE_HTML("\n");
  311.  
  312. // End map copy/paste section.
  313. WRITE_HTML_COMMENT("----------------------------- STOP COPYING HERE ----------------------------")
  314.  
  315. WRITE_HTML("\n")
  316. WRITE_HTML("</body>\n")
  317.  
  318. WRITE_HTML("\n");
  319. WRITE_HTML("</html>\n")
  320.  
  321.